<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css" media="all" />
    <title>个人信息</title>
</head>
<body>
<div style="margin-top: 30px;margin-left: 60px">
    <form class="layui-form layui-form-pane">
        <input type="hidden" name="id" value="${user.id}" />
        <div class="layui-form-item">
            <label class="layui-form-label">图像</label>
            <div class="layui-input-inline">
                <input  name="img" type="hidden" id="img" value="${empty user.img ? '11.png': user.img}" />
                <img src="${pageContext.request.contextPath}/resources/face/${user.img}" id="userImg"  onerror="javascript:this.src='${pageContext.request.contextPath}/resources/face/11.png';" width="188px" height="190px" style="border: #8D8D8D 1px solid">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-inline">
                <input class="layui-input" value="${user.birth}" name="birth" id="birth" readonly="readonly" lay-verify="required"  lay-reqText="生日不能为空" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="phone" readonly="readonly" value="${user.phone}" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input class="layui-input" value="${user.name}" name="name" lay-verify="required"  lay-reqText="名称不能为空" />
            </div>
        </div>
        <div class="layui-form-item" style="padding-left:20px;margin-top: 40px ">
            <button class="layui-btn" type="button" lay-submit lay-filter="submitBtnFilter">
                <i class="layui-icon">&#x1005;</i>修改
            </button>
            <button class="layui-btn layui-btn-primary" type="reset" style="margin-left: 70px">
                <i class="layui-icon">&#xe666;</i>重置
            </button>
        </div>
    </form>
</div>
<script type="text/html" id="faceImgs">
    <form class="layui-form" style="margin-left: 20px;margin-top: 20px" lay-filter="editForm">
        <div style="display: inline-block;margin: 2px;">
            <img src="${pageContext.request.contextPath}/resources/face/11.png" style="width:95px;height: 95px;display: block" />
            <div style="width: 35px;height: 30px;margin: auto">
                <input type="radio" name="face" value="11.png" style="margin-left: 35px;margin-top: 10px"  />
            </div>
        </div>
        <div style="display: inline-block;margin: 2px;">
            <img src="${pageContext.request.contextPath}/resources/face/22.png" style="width:95px;height: 95px;display: block" />
            <div style="width: 35px;height: 30px;margin: auto">
                <input type="radio" name="face" value="22.png" style="margin-left: 35px;margin-top: 10px"  />
            </div>
        </div>
        <div style="display: inline-block;margin: 2px;">
            <img src="${pageContext.request.contextPath}/resources/face/33.png" style="width:95px;height: 95px;display: block" />
            <div style="width: 35px;height: 30px;margin: auto">
                <input type="radio" name="face" value="33.png" style="margin-left: 35px;margin-top: 10px"  />
            </div>
        </div>
        <div style="display: inline-block;margin: 2px;">
            <img src="${pageContext.request.contextPath}/resources/face/44.png" style="width:95px;height: 95px;display: block" />
            <div style="width: 35px;height: 30px;margin: auto">
                <input type="radio" name="face" value="44.png" style="margin-left: 35px;margin-top: 10px"  />
            </div>
        </div>
        <div style="display: inline-block;margin: 2px;">
            <img src="${pageContext.request.contextPath}/resources/face/55.png" style="width:95px;height: 95px;display: block" />
            <div style="width: 35px;height: 30px;margin: auto">
                <input type="radio" name="face" value="55.png" style="margin-left: 35px;margin-top: 10px"  />
            </div>
        </div>
        <div style="display: inline-block;margin: 2px;">
            <img src="${pageContext.request.contextPath}/resources/face/66.png" style="width:95px;height: 95px;display: block" />
            <div style="width: 35px;height: 30px;margin: auto">
                <input type="radio" name="face" value="66.png" style="margin-left: 35px;margin-top: 10px"  />
            </div>
        </div>
        <div style="display: inline-block;margin: 2px;">
            <img src="${pageContext.request.contextPath}/resources/face/77.png" style="width:95px;height: 95px;display: block" />
            <div style="width: 35px;height: 30px;margin: auto">
                <input type="radio" name="face" value="77.png" style="margin-left: 35px;margin-top: 10px"  />
            </div>
        </div>
        <div style="display: inline-block;margin: 2px;">
            <img src="${pageContext.request.contextPath}/resources/face/88.png" style="width:95px;height: 95px;display: block" />
            <div style="width: 35px;height: 30px;margin: auto">
                <input type="radio" name="face" value="88.png" style="margin-left: 35px;margin-top: 10px"  />
            </div>
        </div>
        <div style="display: inline-block;margin: 2px;">
            <img src="${pageContext.request.contextPath}/resources/face/99.png" style="width:95px;height: 95px;display: block" />
            <div style="width: 35px;height: 30px;margin: auto">
                <input type="radio" name="face" value="99.png" style="margin-left: 35px;margin-top: 10px"  />
            </div>
        </div>
        <div style="display: inline-block;margin: 2px;">
            <img src="${pageContext.request.contextPath}/resources/face/100.png" style="width:95px;height: 95px;display: block" />
            <div style="width: 35px;height: 30px;margin: auto">
                <input type="radio" name="face" value="100.png" style="margin-left: 35px;margin-top: 10px"  />
            </div>
        </div>
        <div style="display: inline-block;margin: 2px;">
            <img src="${pageContext.request.contextPath}/resources/face/110.png" style="width:95px;height: 95px;display: block" />
            <div style="width: 35px;height: 30px;margin: auto">
                <input type="radio" name="face" value="110.png" style="margin-left: 35px;margin-top: 10px"  />
            </div>
        </div>
        <div style="display: inline-block;margin: 2px;">
            <img src="${pageContext.request.contextPath}/resources/face/120.png" style="width:95px;height: 95px;display: block" />
            <div style="width: 35px;height: 30px;margin: auto">
                <input type="radio" name="face" value="120.png" style="margin-left: 35px;margin-top: 10px"  />
            </div>
        </div>
    </form>
</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['form','laydate','layer','jquery'],function () {
        var form = layui.form;
        var laydata = layui.laydate;
        var layer = layui.layer;
        var $ = layui.jquery;
        laydata.render({elem:"#birth"});

        $("#userImg").click(function () {
            layer.open({
                type:1,
                content:$("#faceImgs").html(),
                area:['450px','520px'],
                success:function (layero,index) {
                    form.render();
                },
                btn:['确认','取消'],
                btnAlign:'c',
                yes:function (index,layero) {
                    var formData =  form.val("editForm");
                    var face = formData.face;
                    $("#img").val(face);
                    $("#userImg").attr("src","${pageContext.request.contextPath}/resources/face/"+face);
                    layer.close(index);
                }
            });
        });

        form.on("submit(submitBtnFilter)",function (d) {
            $.post("${pageContext.request.contextPath}/comp/user/updateUserInfo.do",d.field,function (rs) {
                if (rs.code != 200){
                    layer.msg(rs.msg);
                    return false;
                }
                layer.msg(rs.msg+" ,三秒后重新登录");
                window.setTimeout(function () {
                    parent.location.href = "${pageContext.request.contextPath}/index.html";
                },3000);
            });
            return false;//阻止表单默认提交
        });
    })

</script>

</body>
</html>
